<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinates and parameters
    const centerX = 200;
    const groundY = 220;
    const topY = 60;
    const bottomXOffset = 90;
    const radius = 10;

    const bottomLeft = { x: centerX - bottomXOffset, y: groundY };
    const bottomRight = { x: centerX + bottomXOffset, y: groundY };
    const topApex = { x: centerX, y: topY };

    // Set line and fill styles
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.fillStyle = 'black';

    // Draw the horizontal line (table)
    ctx.beginPath();
    ctx.moveTo(30, groundY);
    ctx.lineTo(370, groundY);
    ctx.stroke();

    // Draw the spheres (masses)
    function drawSphere(x, y, r) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.stroke();
    }
    drawSphere(bottomLeft.x, bottomLeft.y, radius);
    drawSphere(bottomRight.x, bottomRight.y, radius);
    drawSphere(topApex.x, topApex.y, radius);

    // Draw the rods
    ctx.beginPath();
    ctx.moveTo(topApex.x, topApex.y);
    ctx.lineTo(bottomLeft.x, bottomLeft.y);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(topApex.x, topApex.y);
    ctx.lineTo(bottomRight.x, bottomRight.y);
    ctx.stroke();

    // Add labels
    ctx.font = 'italic 18px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Mass labels
    ctx.fillText('m', topApex.x, topApex.y - 20);
    ctx.fillText('m', bottomLeft.x - 20, bottomLeft.y);
    ctx.fillText('2m', bottomRight.x + 28, bottomRight.y);

    // Rod length labels 'l'
    const midLeft = { x: (bottomLeft.x + topApex.x) / 2, y: (bottomLeft.y + topApex.y) / 2 };
    const midRight = { x: (bottomRight.x + topApex.x) / 2, y: (bottomRight.y + topApex.y) / 2 };
    
    ctx.fillText('l', midLeft.x - 15, midLeft.y + 5);
    ctx.fillText('l', midRight.x + 15, midRight.y + 5);

    // Caption
    ctx.font = '20px KaiTi'; // A common Chinese font
    ctx.textAlign = 'center';
    ctx.textBaseline = 'alphabetic';
    ctx.fillText('力图 3.23.1', centerX, 275);

</script>
</body>
</html>